<template>
    <div class="a">
        用户名称<input type="text" placeholder="请输入用户名称">
        手机号码<input type="text" placeholder="请输入手机号码">
        状态<el-select placeholder="用户状态" style="width: 200px; height: 30px; margin-left: 5px;">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
        </el-select>
        创建时间
        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd" style="width: 200px; height: 30px; margin-left: 5px;">
        </el-date-picker>
        <el-button type="primary">搜索</el-button>
    </div>
    <div class="b">
        <!-- 新增，删除，修改按钮 -->
        <el-button type="primary" plain @click="toInsert">新增</el-button>
        <el-button type="success" plain @click="toUpdate">修改</el-button>
        <el-button type="danger" plain>删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="c">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="用户编号" width="180">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="username" label="用户名称" width="180" />
            <el-table-column property="user" label="用户昵称" width="180" />
            <el-table-column property="department" label="部门" width="180" />
            <el-table-column property="phone" label="手机号码" width="180" />
            <el-table-column property="status" label="状态" width="180">
                <template #default="scope">
                    <el-switch v-model="scope.row.status"></el-switch>
                </template>
            </el-table-column>
            <!-- 创建时间 -->
            <el-table-column property="createtime" label="创建时间" />
            <el-table-column label="操作" width="240">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="toUpdate">编辑</el-button>
                    <el-button type="danger" size="small" @click="toDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="d">
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="2" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
    <!-- 新增弹窗 -->
     <el-dialog title="新增" v-model="isvisible" width="600px" @click="toInsert">
        <Insert></Insert>
    </el-dialog>
    <el-dialog title="修改" v-model="isvisibleUpdate" width="600px" @click="toUpdate">
        <Update></Update>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { ComponentSize } from 'element-plus'

import Insert from './insert.vue'
import Update from './update.vue'

const currentPage = ref(4)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

let tableData = [
    { 
        id: 1,
        username: 'admin',
        user: '若依',
        department: '研发部门',
        phone: '12345678901',
        status: true,
        createtime: '2021-01-01 00:00:00'
    },
    { 
        id: 2,
        username: 'ry',
        user: '若依',
        department: '测试部门',
        phone: '12345678901',
        createtime: '2021-01-01 00:00:00'
    }

]
let isvisible = ref(false)
let isvisibleUpdate = ref(false)
// 新增
let toInsert = () =>{
    isvisible.value = true
}
let toUpdate = () =>{
    isvisibleUpdate.value = true
}
let toDelete = () =>{
    ElMessage.success('删除成功')
}
</script>

<style scoped>
.top-breadcrumb {
    padding: 10px 20px;
    margin: auto 0;
    size: 20px;
    height: 40px;
    /* 下边框线 */
    border-bottom: 1px solid #ddd;
}

.top-breadcrumb-right {
    float: right;
}

input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 10px;

}

.a button {
    margin-left: 20px;
}

.b {
    margin-left: 20px;
    margin-top: 20px;
}

.c {
    margin-left: 20px;
    margin-top: 20px;
}
.d{
    /* 放到表格右下角 */
    position: absolute;
    right: 0;
    margin-top: 20px;
}

/* 鼠标悬浮到表格改变背景色 */
table tr:hover {
    background-color: #ccc;
}
/* 分页样式 */
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>
